<template>
    <Pie :percent="true" :semicircle="true" :config="config" />
</template>

<script setup>
import {getTotal} from '../utils';
import Pie from '../components/Pie.vue';

const data = [
    {
        from: '银川',
        to: '北京',
        value: 10,
        unit: '吨',
        truck: 10,
    },
    {
        from: '银川',
        to: '北京',
        value: 10,
        unit: '吨',
        truck: 10,
    },
    {
        from: '银川',
        to: '北京',
        value: 10,
        unit: '吨',
        truck: 10,
    },
    {
        from: '银川',
        to: '北京',
        value: 10,
        unit: '吨',
        truck: 10,
    },
    {
        from: '银川',
        to: '北京',
        value: 10,
        unit: '吨',
        truck: 10,
    },
    {
        from: '银川',
        to: '北京',
        value: 10,
        unit: '吨',
        truck: 10,
    },
];

const total = getTotal(data);
const config = {
    series: [
        {
            label: {
                formatter: item => {
                    const {value, from, to} = item.data;
                    const ratioNum = (value / total).toFixed(2) * 100;
                    return `{ratio|${ratioNum}%}\n{text|${from}}{text|→}{text|${to}}`;
                },
                rich: {
                    ratio: {
                        fontSize: 20,
                        lineHeight: 22,
                        fonWight: 500,
                    },
                    text: {
                        marginTop: 10,
                        fontSize: 12,
                        lineHeight: 20,
                    },
                },
            },
            data,
        },
    ],
};
</script>

<style scoped></style>
